import React, {Component} from 'react';
import {StyleSheet, Image, Text, View, Alert,ScrollView, TouchableOpacity, Button} from 'react-native';

import View01_Data from '../../static/mock_data/View01/index.json';

let _Data = View01_Data.data.goodsData;
class Home extends Component{
    constructor(props){
        super(props);
        this.state = {
            text:'第一个页面'
        }
    }

    static navigationOptions = {
        tabBarLabel: '首页',
        tabBarIcon: ({focused}) => {
            if (focused) {
                return (
                    <Image style={styles.tabBarIcon} source={require('./assets/images/bg-on.png')}/>
                );
            }
            return (
                <Image style={styles.tabBarIcon} source={require('./assets/images/bg-off.png')}/>
            );
        }
    };

    render(){
        const navigate = this.props.navigation;
        let {text} = this.state;
        return(
            <ScrollView>
                {
                    _Data.map((item,index)=>{
                        return <TouchableOpacity key={index} onPress={()=>navigate.navigate('Details')} >
                            <View style={styles.box}>
                                <Image
                                source={{url:item.url}}
                                style={styles.img}
                                />
                                <View style={{flex:8}}>
                                    <Text style={styles.text}>{item.name}</Text>
                                    <Text style={styles.price}>￥{item.price}</Text>
                                </View>
                            </View>
                        </TouchableOpacity>                        
                    })
                }
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    box:{
        flex: 1,
        height:100,
        marginTop: 20,
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderColor: '#eee',
    },
    img:{
        width:80,
        height:80,
        flex:2,
        marginLeft: 10,
        marginRight: 10,
    },
    text:{
        fontSize:13,
        color:'#222',
        marginTop:20
    },
    price:{
        fontSize:12,
        color:'red',
        marginTop:10
    },
    tabBarIcon:{
        width:25,
        height:25,
        marginRight:1.8
    }
})

export default Home;